import { Button, message, Pagination, Space, Table } from 'antd';
import React, { Component } from 'react';
import { getRoleList } from '../../api/role';
import Auth from '../../componments/Auth';
import AddRole from './AddRole';
import DeleteRole from './DeleteRole';
import EditRole from './EditRole';


export interface IRole {
    id: number,
    roleName: string,
    permissionList?: any
}

interface IState {
    roleList: IRole[]
    current: number
    pageSize: number
    total: number
    loading: boolean
    visibleAddRoleModal: boolean
    visibleEditRoleModal: boolean
    role?: IRole
}


class RoleList extends Component<any, IState>{

    constructor(props: any, context: any) {
        super(props, context)
        this.state = {
            roleList: [
                {
                    id: 1,
                    roleName: "roleName"
                }
            ],
            current: 1,
            pageSize: 20,
            total: 4,
            loading: false,
            visibleAddRoleModal: false,
            visibleEditRoleModal: false
        }
    }




    getRoleList = (page: number = 1) => {
        // return;
        getRoleList(page).then((response) => {
            const { dataList, Limit, totalCount } = response.data.data
            this.setState({
                roleList: dataList,
                loading: false,
                pageSize: Limit,
                total: totalCount,
            })

        })
    }

    deleteRole = (id: number) => {
        this.setState((state) => ({
            roleList: state.roleList.filter(admin => admin.id !== id)
        }))
    }

    showEditRoleModal = (role: IRole) => {
        this.setState({
            role: role,
            visibleEditRoleModal: true
        })
    }

    componentDidMount() {
        // this.getRoleList()
    }

    change = (pagination: any) => {
        this.getRoleList(pagination.current)
    }

    showAddRoleModel = () => {
        this.setState({
            visibleAddRoleModal: true
        })
    }

    hideAddRoleModel = (refresh?: boolean) => {
        if (refresh) {
            message.success('成功！')
            let form: IRole = {
                id: 2,
                roleName: "roleName1"
            }
            this.setState((state) => ({
                roleList: [...this.state.roleList, form]
            }))
        }
        this.setState({
            visibleAddRoleModal: false
        })
    }

    hideEditRoleModel = () => {
        this.setState({
            visibleEditRoleModal: false
        })
    }

    render() {
        return (
            <>
                <Button type="primary" onClick={this.showAddRoleModel} >添加角色</Button>
                <AddRole
                    visible={this.state.visibleAddRoleModal}
                    callback={this.hideAddRoleModel}
                />

                <EditRole
                    visible={this.state.visibleEditRoleModal}
                    role={this.state.role}
                    cancel={this.hideEditRoleModel}
                />

                <Table
                    loading={this.state.loading}
                    dataSource={this.state.roleList}
                    rowKey={'id'}
                    pagination={{ position: ['bottomCenter'], total: this.state.total, pageSize: this.state.pageSize }}
                    onChange={this.change}
                >
                    <Table.Column title={'ID'} dataIndex={'id'} />
                    <Table.Column title={'角色名称'} dataIndex={'roleName'} />
                    <Table.Column title={'管理'} render={(role: IRole) => (
                        <Space>
                            <Button type="primary" onClick={() => {
                                this.showEditRoleModal(role)
                            }}>编辑</Button>
                            <Auth path="/admin/role/list" >
                                <DeleteRole id={role.id} deleteRole={this.deleteRole} />
                            </Auth>

                        </Space>
                    )} />
                </Table>
            </>
        );
    }
}

export default RoleList;